<template>
	<view class="detailpage">
		<view class="itemlist">
			<view class="imgbox">
			<image class="img" :src="'https://admin.caifubang.top/prod-api'+pro.productImg" ></image>
			</view>
			<view class="info">
				<view class="nameline">
					<view class="goodname">
					{{pro.productName}}
					</view>
					<view class="type" :class="pro.auditStatus==0?'dai	':pro.auditStatus==1?'tongguo':'wei'">
						{{pro.auditStatus==0?'待审核':pro.auditStatus==1?'已购买':pro.auditStatus==2?'未通过':'未支付'}}
					</view>
				</view>
				<view class="labelline">
					{{pro.merchantName}}  {{pro.industryType}}
				</view>
				<view class="footline">
					<view class="pricebox">
						<view class="price">
							{{pro.productPrice}}
						</view>
						<view class="danwei">
						   积分
						</view>
					</view>
					<view class="time">
						{{pro.createTime}}
					</view>
				</view>
			</view>
		</view>
		<view class="imgbox1">
			<view class="imgtitle">
				支付记录
			</view>
			<view class="imglist">
				<image class="image" v-for="(item ,index) in pro.imglist" :key="index" :src="'https://admin.caifubang.top/prod-api'+item" mode="" @click="yulan(index)"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pro:{}
			}
		},
		onLoad(e) {
			let pro=JSON.parse(e.pro)
			if(pro.paymentScreenshot){
				pro.imglist=pro.paymentScreenshot.split(",")
			}
			this.pro=pro
			console.log(this.pro)
		},
		methods: {
			//预览图片
			yulan(e){
				const baseUrl = "https://admin.caifubang.top/prod-api"
				this.imglist = this.pro.imglist.map(path => baseUrl + path)
				uni.previewImage({
							urls: this.imglist,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log(data)
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						})
			},
		}
	}
</script>

<style lang="less" scoped>
.detailpage{
	width: 750rpx;
	box-sizing: border-box;
	background-color: #F1f1f1;
	.itemlist{
				  width: 100%;
				  background-color: white;
				  box-sizing: border-box;
				  padding: 20rpx;
				  display: flex;
				  align-items: center;
				  margin: 20rpx  0;
				  .imgbox{
					  width: 150rpx;
					  height: 150rpx;
					  border-radius: 20rpx;
					  margin-right: 20rpx;
					  .img{
						  width: 100% !important;
						  height: 100% !important;
						  border-radius: 20rpx !important;
					  }
				  }
				  .info{
					  flex: 1;
					  .nameline{
						  display: flex;
						  align-items: center;
						  justify-content: space-between;
						  .goodname{
						  					  font-weight: bold;
						  					  line-height: 1.6;
						  }
						  .type{
						  					  font-size: 30rpx;
						  					  font-weight: bold;
						  }
						  .dai{
						  					  color: #A2A2A2;
						  }
						  .tongguo{
						  					  color: #13C60F ;
						  }
						  .wei{
						  					  color: red;
						  }
					  }
					  .labelline{
						  line-height: 1.8;
						  font-size: 28rpx;
						  font-weight: bold;
					  }
					  .footline{ width: 100%;
					  display: flex;
					  align-items: center;
					  justify-content: space-between;}
					 
					  .pricebox{
						  display: flex;
						  align-items: center;
						  color: #FF462A;
						  .price{
							  font-weight: bold;
							  font-size: 30rpx;
						  }
						  .danwei{
							  font-size: 22rpx;
						  }
					  }
					  .time{
						  font-size: 20rpx;
						  color: #C3C3C3 ;
					  }
					 
					  
					  
				  }
	}
	.imgbox1{
		width: 100%;
		
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
		.imgtitle{
			font-weight: bold;
		}
		.imglist{
			width: 100%;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			.image{
				width: 150rpx;
				height: 280rpx;
				border-radius: 10rpx;
				border: 1rpx solid gray;
				margin-right: 20rpx;
			}
		}
		
	}
	.btnline{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 100rpx;
		.btn1{
			width: 250rpx;
			height: 70rpx;
			text-align: center;
			box-sizing: border-box;
			border: 1rpx solid darkgray;
			line-height: 70rpx;
			border-radius: 35rpx;
		}
		.btn2{
			width: 250rpx;
			height: 70rpx;
			text-align: center;
			box-sizing: border-box;
			color: white;
			line-height: 70rpx;
			background-color:#FF5C00 ;
			border-radius: 35rpx;
		}
	}
	
}
</style>
